<script setup lang="ts">
import { ref, computed,watch,onMounted,toRaw } from "vue";
import { useColumns } from "./columns";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
const search_field = ref('30day');
const last30Days = new Date(new Date());
last30Days.setDate(new Date().getDate() - 29);
const time = ref([formatDate(last30Days),formatDate(new Date())]);
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
const props = defineProps({
  title: {
    type: String,
    default: () => ''
  },
  api: {
    type: Function,
    default: () => function (){}
  },
  size: {
    type: Number,
    default: () => ''
  }
});
const dataList = ref([]);
const loading = ref(true);
import {welcomeGoodsRank} from "@/api/statistics";
const selectType =function (v){
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(today.getDate() - 1);

  const last7Days = new Date(today);
  last7Days.setDate(today.getDate() - 6);

  const last30Days = new Date(today);
  last30Days.setDate(today.getDate() - 29);

  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

  const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
  const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);

  if(v=='today'){
    time.value = [formatDate(today),formatDate(today)]
  }else if(v=='yesterday'){
    time.value = [formatDate(yesterday),formatDate(yesterday)]
  }else if(v=='7day'){
    time.value = [formatDate(last7Days),formatDate(today)]
  }else if(v=='30day'){
    time.value = [formatDate(last30Days),formatDate(today)]
  }else if(v=='month'){
    time.value = [formatDate(firstDayOfMonth),formatDate(lastDayOfMonth)]
  }else if(v=='lastmonth'){
    time.value = [formatDate(firstDayOfLastMonth),formatDate(lastDayOfLastMonth)]
  }else{
    time.value = []
  }
  getData();
}
const chartData = ref([])
async function getData(){
  const { data } = await props.api(toRaw({time:time.value}))
  chartData.value = data
}
onMounted(() => {
  getData();
});

import { ChartBar } from "./charts";
const barChartData = [
  {
    requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
    userData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
    questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
  }
];
</script>

<template>
  <div class="flex justify-between">
    <span class="text-md font-medium">分析概览</span>
    <div>
      <el-form-item style="margin-bottom:5px;">
        <el-select v-model="search_field" placeholder="选择时间" class="search_field" @change="selectType" style="width: 104px;border-radius:0">
          <el-option label="今天" value="today" />
          <el-option label="昨天" value="yesterday" />
          <el-option label="最近七天" value="7day" />
          <el-option label="最近30天" value="30day" />
          <el-option label="本月" value="month" />
          <el-option label="上月" value="lastmonth" />
          <el-option label="自定义" value="diy" />
        </el-select>
        <el-date-picker
          v-model="time" value-format="YYYY-MM-DD" format="YYYY-MM-DD" @change="getData"
          type="daterange" style="width: 210px;border-radius: 0px;border-left: 0;margin-left: -1px;"
          range-separator="~" prefix-icon=""
          start-placeholder="Start date"
          end-placeholder="End date"
        >
        </el-date-picker>
      </el-form-item>
    </div>
  </div>
  <ChartBar :userData="chartData.map(x=>x.uname)" :requireData="chartData.map(x=>x.assigned_count)" :questionData="chartData.map(x=>x.followed_count)" v-if="chartData !=undefined"/>
</template>


<style lang="scss" scoped>
:deep(.el-table) {
  --el-table-border: none;
  --el-table-border-color: transparent;

  .el-empty__description {
    margin: 0;
  }

  .el-scrollbar__bar {
    display: none;
  }
}
</style>
